async function init() {
  //请求token验证
  let res = await axios({
    url: "/dashboard",
    method: "get",
  });

  //顶部概览区域
  console.log(res);
  document.querySelector("span[name=salary]").innerHTML = res.data.data.overview.salary;
  document.querySelector("span[name=student_count]").innerHTML = res.data.data.overview.student_count;
  document.querySelector("span[name=age]").innerHTML = res.data.data.overview.age;
  document.querySelector("span[name=group_count]").innerHTML = res.data.data.overview.group_count;

  //获取 全年薪资走势
  let arrMonth = res.data.data.year.map((item) => item.month);
  let arrSalary = res.data.data.year.map((item) => item.salary);
  salaryChart(arrMonth, arrSalary);

  //获取 班级薪资分布
  let arr = res.data.data.salaryData.map((item) => {
    return { name: item.label, value: item.g_count + item.b_count };
  });
  classChart(arr);

  //获取 每组薪资走势
  groupChart(res.data.data.groupData);

  let barr = res.data.data.salaryData.map((item) => {
    return { name: item.label, value: item.b_count };
  });
  let garr = res.data.data.salaryData.map((item) => {
    return { name: item.label, value: item.g_count };
  });
  //获取 男女薪资走势
  genderChart(barr, garr);

  //获取 地理区域分布数据
  mapChart(res.data.data.provinceData);
}

init();

//封装全年薪资走势
function salaryChart(month, salary) {
  //获取echarts图表对象
  let myChart = echarts.init(document.querySelector("#line"));
  //配置对象
  let option = {
    //--------------添加图标标题
    title: {
      text: "2021全学科薪资走势",
      top: "3%",
      left: "4%",
    },
    //  ******** 设置绘图网格边距
    grid: {
      left: "10%",
      top: "20%",
    },
    //-----------------设置绘图网格边距
    //  ******** 增加提示框
    tooltip: {
      show: true,
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: month,
      // ******** 设置x轴线为虚线
      axisLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "value",
      //  ******** 设置y轴的分隔线型
      splitLine: {
        // 分割线
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: salary,
        type: "line",
        smooth: true,
        // ******** 设置关键点图形
        symbol: "emptyCircle",
        // ******** 设置关键点大小
        symbolSize: 10,
        // ******** 设置拆线样式
        lineStyle: {
          width: 6,
          color: "#608bff",
        },
        // ******** 区域样式
        areaStyle: {
          color: {
            // 线性渐变
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(83,168,255,1)",
              },
              {
                offset: 0.8,
                color: "rgba(89,154,255,0)",
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  //配置对象
  myChart.setOption(option);
}

//封装班级薪资分布
function classChart(data) {
  //获取echarts图表对象
  let myChart = echarts.init(document.querySelector("#salary"));

  // 自定义配置项
  let option = {
    // ******** 新增标题设置
    title: {
      text: "班级薪资分布",
      top: "4%",
      left: "5%",
    },
    // 提示框
    tooltip: {
      trigger: "item",
    },
    // 图例
    legend: {
      left: "center",
      // ******** 设置下边距，删除上边距
      bottom: "5%",
    },
    // ******** 定义颜色数组
    color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
    // 图表数据
    series: [
      {
        name: "Access From",
        type: "pie", // 用于定义饼图
        // ******** 定义圆环内外半径
        radius: ["60%", "70%"],
        avoidLabelOverlap: false,
        // ******** 每一块饼图的样式
        itemStyle: {
          // ******** 修改圆角大小
          borderRadius: 30,
          borderColor: "#fff",
          borderWidth: 2,
        },
        // 文本样式
        label: {
          show: false,
          position: "center",
        },
        // 设置加强效果
        emphasis: {
          label: {
            show: true,
            // ******** 设置字体大小
            fontSize: "30",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  //配置对象
  myChart.setOption(option);
}

//封装每组薪资走势函数
function groupChart(data) {
  //获取echarts图表对象
  let myChart = echarts.init(document.querySelector("#lines"));

  // 自定义配置项
  let option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
      // ******** 将上面数据复制一份
      {
        data: [120, 200, 150, 80, 70, 110, 130].reverse(),
        type: "bar",
      },
    ],
    // ******** 设置渐变颜色
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(81, 217, 168,1)", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(81, 217, 168,0)", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(73, 159, 238,1)", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(73, 159, 238,0)", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
  };
  //配置对象
  myChart.setOption(option);

  //封装一个函数，提取出数据，并设置给图表
  function getDataByGroupNum(num = 1) {
    //从每组中提取使用于图表的数组
    let arrName = data[num].map((item) => item.name);
    let arrHopeSalary = data[num].map((item) => item.hope_salary);
    let arrSalary = data[num].map((item) => item.salary);
    // console.log(arrHopeSalary)
    // console.log(arrSalary)
    //设置到图表的配置中
    option.xAxis.data = arrName;
    option.series[0].data = arrHopeSalary;
    option.series[1].data = arrSalary;

    //由于option配置项修改了，所以需要再次应用配置对象
    myChart.setOption(option);
  }

  getDataByGroupNum();

  //实现按钮组切换
  const oBtns = document.querySelectorAll("#btns button");

  oBtns.forEach((btn) => {
    btn.addEventListener("click", function () {
      //利用排它实现按钮切换颜色
      document.querySelector("#btns .btn-blue").classList.remove("btn-blue");
      this.classList.add("btn-blue");

      getDataByGroupNum(this.innerHTML);
    });
  });
}

//封装男女薪资走势函数
function genderChart(bData, gData) {
  //获取echarts图表对象
  let myChart = echarts.init(document.querySelector("#gender"));
  // 自定义配置项
  let option = {
    // ******** 修改title多个标题所以用数组
    title: [
      {
        text: "男女薪资分布",
        left: "3%",
        top: "4%",
      },
      {
        text: "男",
        left: "center",
        top: "45%",
      },
      {
        text: "女",
        subtext: "Fake Data",
        left: "center",
        top: "90%",
      },
    ],
    tooltip: {
      trigger: "item",
    },
    legend: {
      // ******** 不显示图例
      show: false,
      orient: "vertical",
      left: "left",
    },
    // ******** 定义颜色
    color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
    series: [
      {
        name: "Access From",
        type: "pie",
        // ******** 调整内外圆半径
        radius: ["20%", "30%"],
        // ******** 调整位置
        center: ["50%", "25%"],
        data: bData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      // ******** 复制一份数据，调用位置center: ['50%', '75%']
      {
        name: "Access From",
        type: "pie",
        // ******** 调整内外圆半径
        radius: ["20%", "30%"],
        // ******** 调整位置
        center: ["50%", "75%"],
        data: gData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}

//封装地理区域分布函数
function mapChart(mapData) {
  //获取echarts图表对象
  let myChart = echarts.init(document.querySelector("#map"));

  // 演示数据
  const data = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]

  data.map(item => {    //item代表是data里的对象
    let obj = mapData.find(val => {     //val代表 mapData里的对象
      //mapData里的对象的name属性是否包含 item里的对象的name属性，如果包含就把 mapData里的对象返回
      return val.name.indexOf(item.name) >=0 
    })
    //如果找到了这个对象，将使用obj对象的value属性赋值给data里的对象
    if(obj){
      item.value = obj.value
    }
  })

  let option = {
    title: [
      {
        text: "地域分布",
        // subtext: '纯属虚构',
        left: "center",
        top: 20, // 1. ******** 设置标题位置
      }
    ],
    tooltip: {
      trigger: "item",
    },
    visualMap: {
      // 虚拟地图
      min: 0,
      max: 20, // 13. ******** 根据真实数据设置成最大值
      left: "left",
      top: "bottom",
      text: ["高", "低"],
      calculable: true,
      colorLightness: [0.2, 100],
      color: ["#c05050", "#e5cf0d", "#5ab1ef"],
      dimension: 0,
    },
    grid: {
      right: 40,
      top: 100,
      bottom: 40,
      width: "30%",
    },
    xAxis: [
      {
        show: false, // 5. ******** 隐藏右侧x坐标轴
        position: "top",
        type: "value",
        boundaryGap: false,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        show: false, // 6. ******** 隐藏右侧y坐标轴
        type: "category",
        // data: titledata,		// 7. ******** 注销 不显示 y轴，也就不需要设置数据
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    series: [
      {
        z: 1,
        name: "备案地",
        type: "map",
        map: "china",
        left: "10",
        right: "5%", // 10. ******** 修改地图，距 DOM 右侧间距
        top: 10, // 9. ******** 注销bottom 设置top可以调整地图 距 DOM 上侧间距
        // bottom: "5%",
        zoom: 0.9,
        label: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
          },
        },
        data: data, // 11. ******** 直接使用演示数据进行
      },
    ],
  };

  myChart.setOption(option);
}
